import React from "react";
import PropTypes from "prop-types";
import StyledAvatar, { AvatarClip, StatusIcon, AvatarImage } from "./style";

function Avatar({
  src,
  size = "48px",
  status,
  statusIconSize = "8px",
  ...rest
}) {
  return (
    <StyledAvatar {...rest}>
      {status && <StatusIcon status={status} size={statusIconSize} />}
      <AvatarClip size={size}>
        <AvatarImage src={src} alt=""></AvatarImage>
      </AvatarClip>
    </StyledAvatar>
  );
}

Avatar.propTypes = {
  src: PropTypes.string.isRequired,
  size: PropTypes.string,
  status: PropTypes.oneOf(["offline", "online"]),
  statusIconSize: PropTypes.string,
};

export default Avatar;
